<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html+css+js轮番图</title>
    <link rel="stylesheet" href="./17.css">
</head>
<body>
    <div class="con">
        <!-- 图片 -->

        <div class="wrap">
            <a href="https://www.xuexi.cn/lgpage/detail/index.html?id=12416261321856805072&item_id=12416261321856805072"><img src="../../img2/xjp1.jpg" ></a>
            <a href="https://www.xuexi.cn/lgpage/detail/index.html?id=15917995170311526181&item_id=15917995170311526181"><img src="../../img2/xjp2.jpg"  ></a>
            <a href="https://www.xuexi.cn/lgpage/detail/index.html?id=4636733668520949773&item_id=4636733668520949773"><img src="../../img2/xjp3.jpg"  ></a>
            <a href="https://www.xuexi.cn/lgpage/detail/index.html?id=16114485145165124142&item_id=16114485145165124142"><img src="../../img2/xjp4.jpg" ></a>
            <a href="https://www.xuexi.cn/lgpage/detail/index.html?id=12115588061404357308&item_id=12115588061404357308#"><img src="../../img2/xjp5.jpg"  ></a>
           

        </div>
        <!-- 翻转数字 -->
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <!-- 左右翻转按钮 -->
        <div class="butt">
            <a href="#" class="button-left">&lt;</a>
            <!-- 绑定onclick事件 -->
            <a href="#" class="button-right" onclick="rightImg()">&gt;</a>
        </div>
    </div>
    <script>
        //分析：实现左右两边按钮的切换 以及自动轮播
		//右边按钮的实现 获取
		//获取数据 .buntton-right
        var right=document.querySelector('.button-right');
        //通过class类名获取图片
		//获取数据 .wrap
		var wrap=document.querySelector('.wrap');
        //定义一个变量用来判断图片的位置
		var newImg=0;
        //函数
			function rightImg(){
				//判断newImg===4的时候就等于0；
				if(newImg===4){
					newImg=0;
					//图片的位置变化
					//计算图片位置的变化  向左变动
					wrap.style.left=newImg*-1000+'px';
					//让第四张图片切换成第一张图片时没有动画  不发生过渡
					wrap.style.transition="none";
				}
				else{
					//不等于4的时候++;
					newImg++;
					//计算图片位置的变化  向左变动
					wrap.style.left=newImg*-1000+'px';
					//之后加上动画效果  加上过渡效果
					wrap.style.transition="1s ease";
				}
				//对index 进行一个判断
				index++;
				if(index>4){
					index=0;
				}
				newSpan();
				
			}
            //左边图片的切换 
			// 这边用第二种方法
			//获取左边按钮
			var left=document.querySelector('.button-left');
			left.onclick=function (){
				if(newImg===0){
					newImg=4;
					//图片的位置变化
					wrap.style.left=newImg*-600+'px';
					//让第四张图片切换成第一张图片时没有动画
					wrap.style.transition="none";
				}else{
					//不等于4的时候++;
					newImg--;
					wrap.style.left=newImg*-600+'px';
					//之后加上动画效果
					wrap.style.transition="1s ease";
				}
				index--;
				if(index<0){
					index=4;
				}
				newSpan();
			}    
            //实现自动轮播 调用右边按钮的函数
			//会用到定时器，设置每两秒调用一次
			var timer;//全局变量
			function newtu(){
				//箭头函数es6,没两秒调用
				timer=setInterval(()=>{
					rightImg();
				},2000);
			}
			newtu();
            //鼠标移入 移出效果
			//鼠标移入停止轮播
			document.querySelector('.con').onmouseover= function (){
				//停止器
				clearInterval(timer);
			}
			//鼠标移出开始轮播
			document.querySelector('.con').onmouseout=function (){
				//调用轮播函数
				newtu();
			}
			//展示小圆点的一个亮部显示
			//获取小圆点
			var span=document.getElementsByTagName("span");
			//用for循环 遍历小圆点
			var index=0;
			//封装成一个函数
			function newSpan(){
				for(var i=0;i<span.length;i++){
					span[i].className="";
				}
				span[index].className='on';
			}
			newSpan();
    </script>
	<script src="1."></script>
</body>
</html>